<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>答题部分</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/all.css" />
		<link rel="stylesheet" type="text/css" href="css/three.css"/>
		<link rel="stylesheet" type="text/css" href="css/four.css"/>
		<link rel="stylesheet" type="text/css" href="css/five.css"/>
		<link rel="stylesheet" type="text/css" href="css/six.css"/>
		<link rel="stylesheet" type="text/css" href="css/seven.css"/>
		<link rel="stylesheet" type="text/css" href="css/eight.css"/>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<div id="web">
			<!--第一张轮播开始-->
			<div id="t_three" style="display: block;">
				<div class="three-a">
					<img src="img/three-a.png"/>
				</div>
				<div class="three-b">
					<img src="img/three-b.png"/>
				</div>
				<div class="three-c">
					<img src="img/three-c.png"/>
				</div>
				<div class="three-d">
					<img src="img/three-d.png"/>
				</div>
			</div>
			<!--第一张轮播结束-->
			
			<!--第二张轮播开始-->
			<div id="t_four" style="display: none;">
				<div class="four-a">
					<img src="img/three-a.png"/>
				</div>
				<div class="four-b">
					<img src="img/four-d.png"/>
				</div>
				<div class="four-c">
					<img src="img/four-a.png"/>
				</div>
				<div class="four-c_1">
					<img src="img/four-a.png"/>
				</div>
				<div class="four-d">
					<img src="img/four-b.png"/>
				</div>
				<div class="four-d_1">
					<img src="img/four-b.png"/>
				</div>
				<div class="four-e">
					<img src="img/four-c.png"/>
				</div>
				<div class="four-e_1">
					<img src="img/four-c.png"/>
				</div>
			</div>
			<!--第二张结束-->
			
			<!--第三张开始-->
			<div id="t_five" style="display: none;">
				<div class="five-a">
					<img src="img/two-a.png"/>
				</div>
				<div class="five-b">
					<img src="img/four-d.png"/>
				</div>
				<div class="five-c">
					<img src="img/five-a.png"/>
				</div>
				<div class="five-d">
					<img src="img/five-f.png"/>
				</div>
				<div class="five-e">
					<img src="img/five-d.png"/>
				</div>
				<div class="five-f">
					<img src="img/five-e.png"/>
				</div>
				<div class="five-g">
					<img src="img/five-b.png"/>
				</div>
				<div class="five-h">
					<img src="img/five-c.png"/>
				</div>
			</div>
			<!--第三张结束-->
			
			<!--第四张开始-->
			<div id="t_six" style="display: none;">
				<div class="six-a">
					<img src="img/six-d.png"/>
				</div>
				<div class="six-b">
					<img src="img/six-c.png"/>
				</div>
				<div class="six-c">
					<img src="img/six-a.png"/>
				</div>
				<div class="six-d">
					<img src="img/six-b.png"/>
				</div>
			</div>
			<!--第四张结束-->
			
			<!--第五张开始-->
			<div id="t_seven" style="display: none;">
				<div class="seven-a">
					<img src="img/three-a.png"/>
				</div>
				<div class="seven-b">
					<img src="img/four-d.png"/>
				</div>
				<div class="seven-c">
					<img src="img/seven-a.png"/>
				</div>
				<div class="seven-d">
					<img src="img/seven-b.png"/>
				</div>
				<div class="seven-e">
					<img src="img/seven-c.png"/>
				</div>
			</div>
			<!--第五张结束-->
			
			<!--第六张开始-->
			<div id="t_eight" style="display: none;">
				<div class="eight-a">
					<img src="img/three-a.png"/>
				</div>
				<div class="eight-b">
					<img src="img/four-d.png"/>
				</div>
				<div class="eight-c">
					<img src="img/eight-c.png"/>
				</div>
				<div class="eight-d">
					<img src="img/eight-a.png"/>
				</div>
				<div class="eight-e">
					<img src="img/eight-d.png"/>
				</div>
				<div class="eight-f">
					<img src="img/eight-b.png"/>
				</div>
				<div class="eight-g">
					<img src="img/eight-f.png"/>
				</div>
				<div class="eight-h">
					<img src="img/eight-e.png"/>
				</div>
			</div>
			<!--第六张结束-->
			
			
			
			<!--按钮-->
			<div id="btn">
				<div class="btn-a" id="btn_a">
					<img src="img/three-e.png"/>
					<a></a>
				</div>
				<div class="btn-b" id="btn_b">
					<img src="img/three-f.png"/>
					<a></a>
				</div>
				<div class="btn-c" id="btn_c">
					<img src="img/three-g.png"/>
					<a></a>
				</div>
				<div class="btn-d" id="btn_d">
					<img src="img/three-h.png"/>
					<a></a>
				</div>
				<div class="btn-e">
					<img src="img/three-i.png"/>
					
				</div>
			</div>
			<div >
				<audio id="music" controls src="" loop></audio>
			</div>
			<div id="ts"></div>
			<!--按钮结束-->
			
			
			
			<!--结果页面-->
			<div id="jg" style="display: none;">
				<div class="jg-a">
					<img src="img/jg-a.png"/>
				</div>
				<div class="jg-b">
					<img src="img/jg-c.png"/>
					<span>哟,男神</span>
				</div>
				<div class="jg-c">
					<img src="img/two-b.png"/>
				</div>
				<div class="jg-d">
					<img src="img/huangjing.png"/>
				</div>
				<div class="jg-e">
					<img src="img/jg-b.png"/>
					<span>不错哦，黄金耶！</span>
				</div>
				<div class="jg-f">
					<img src="img/jg-e.png"/>
					<span>再来一次不</span>
				</div>
				<div class="jg-g">
					<img src="img/jg-f.png"/>
					<span>分享战绩</span>
				</div>
				<div class="jg-h">
					<img src="img/jg-h.png"/>
				</div>
				<div class="jg-i">
					<img src="img/jg-g.png"/>
				</div>
			</div>
			<!--结束-->
			
			
		</div>
		
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/preloadjs.min.js"></script>
		
		
		<script>
			
			// 倒计时
			var btn_d = document.getElementById("btn_d");
			var music_a = document.querySelector("#music"); 
			var hour = 60;
			var tt = setInterval(function(){
				hour--;
				console.log(hour);
				$("#btn_d>a").html(hour+"s");
				// 清除定时器
				if(hour==0){
					clearInterval(tt);
					$("#web>div").css({
						display:"none",
					});
					music_a.pause();
					$("#jg").css({
						display:"block",
					});
					$(".jg-f").click(function(){
						window.location.href = "index.html";
					})
				}
			},1000);
			
			// 加载
			$.ajax({
				url:"music.json",
				type:"get",
				dataType:"json",
				success:function(res){
					console.log(res);
					//打乱顺序
					res.sort(function(){
						// sort方法时 return值 大于0或小于0交换位置
						// 随机数 -0.5 ---- 0.5之间
						return Math.random() - 0.5; 
					})
					
					var frist_arr = [];
					var second_arr = [];
					
					for(var i=0;i<res.length;i++){
						if(i<30){	//第一批资源路径添加到数组中
							console.log(frist_arr.push( res[i].audio ));
							
						}else{
							second_arr.push( res[i].audio );
						}
					}
					console.log(frist_arr,second_arr);
					console.log(frist_arr[0]);
					load1(frist_arr,second_arr);
					
					// 音乐切换
					var j = 1
					var player = document.getElementById("music");
					
					// 第一页播放
					player.src = frist_arr[0];
					player.play();
					$("#btn_a>a").html(res[0].item[0]);
					$("#btn_b>a").html(res[0].item[1]);
					$("#btn_c>a").html(res[0].item[2]);
					
					
					// 点击切换
					
					// 点击限制
					var i=0;
					var y = 0;
					$("#btn_a").click(function(){
						var x = 0;
						if(hour%2 ==0){
							if(i<6){
								$("#web>div").eq(i).css({
									display:"none",
								});
								$("#web>div").eq(i+1).css({
									display:"block",
								});
								i++;
								
								// 收集答对的歌曲数
								if(res[j].answer == x){
									console.log("对");
									y++;
									console.log("答对了"+y+"题");
								}else{
									console.log("错");
								}
								// 将歌曲的名字赋到盒子上
								if(j<30){
									j++;
									player.src = frist_arr[j];
									player.play();
									$("#btn_a>a").html(res[j].item[0]);
									$("#btn_b>a").html(res[j].item[1]);
									$("#btn_c>a").html(res[j].item[2]);				
								}
								
							}
							// 判断是否重新跳到第一页
							if(i>=6){
								$("#web>div").eq(i+1).css({
									display:"none",
								});
									i=0;
								$("#web>div").eq(i).css({
									display:"block",
								});
							}
							console.log(i); 
							$("#ts").removeClass("ts");
						}
						// 将间隔小于2s的添加提示
						if(hour%2 !== 0){
							$("#ts").html("听两秒钟吧,么么哒！");
							$("#ts").addClass("ts");
							console.log("不要点那么快");
						}
					});
					
					// 第二个按钮
					$("#btn_b").click(function(){
						var x = 1;
						if(hour%2 ==0){
							if(i<6){
								$("#web>div").eq(i).css({
									display:"none",
								});
								$("#web>div").eq(i+1).css({
									display:"block",
								});
								i++;
								
								// 收集答对歌曲数量
								if(res[j].answer == x){
									console.log("对");
									y++;
									console.log("答对了"+y+"题");
								}else{
									console.log("错");
								}
								
								if(j<30){
									j++;
									player.src = frist_arr[j];
									player.play();
									$("#btn_a>a").html(res[j].item[0]);
									$("#btn_b>a").html(res[j].item[1]);
									$("#btn_c>a").html(res[j].item[2]);
									
								}
								console.log(j);
							}
							if(i>=6){
								$("#web>div").eq(i+1).css({
									display:"none",
								});
								i=0;
								$("#web>div").eq(i).css({
									display:"block",
								});	
							}
							console.log(i);
							$("#ts").removeClass("ts");
						}
						if(hour%2 !== 0){
							$("#ts").html("听两秒钟吧,么么哒！");
							$("#ts").addClass("ts");
							console.log("不要点那么快");
						}
						console.log(x);
					});
					
					// 第三个按钮
					$("#btn_c").click(function(){
						var x = 2;
						if(hour%2 ==0){
							if(i<6){
								$("#web>div").eq(i).css({
									display:"none",
								});
								$("#web>div").eq(i+1).css({
									display:"block",
								});
								i++;
								
								// 收集答对歌曲数量
								if(res[j].answer == x){
									console.log("对");
									y++;
									console.log("答对了"+y+"题");
								}else{
									console.log("错");
								}
								
								if(j<30){
									j++;
									player.src = frist_arr[j];
									player.play();
									$("#btn_a>a").html(res[j].item[0]);
									$("#btn_b>a").html(res[j].item[1]);
									$("#btn_c>a").html(res[j].item[2]);
								}
								console.log(j);
							}
							if(i>=6){
								$("#web>div").eq(i+1).css({
									display:"none",
								});
								i=0;
								$("#web>div").eq(i).css({
									display:"block",
								});	
							}
							console.log(i); 
							$("#ts").removeClass("ts");
						}
						if(hour%2 !== 0){
							$("#ts").html("听两秒钟吧,么么哒！");
							$("#ts").addClass("ts");
							console.log("不要点那么快");
						}
					});
					
					
					// 通过父盒子控制
//					$("#btn").click(function(e){
//						e.target.
//					});
				
				}
			})
			
			function load1(data1,data2){
				var queue = new createjs.LoadQueue();
				// 先加载data1 第一批
				queue.loadManifest( data1 );
				queue.on("progress",function(e){
					var p = (e.progress*100).toFixed(2)+"%";
					console.log(p);
				})
				queue.on("complete",function(){
					// 第一批加载完成，可以开始游戏
					console.log("开始游戏");
					// 开始在后方继续加载剩下的资源
					load2(data2);
				})
				queue.load();
			}
			
			
			function load2( data ){
				var queue = new createjs.LoadQueue();
				queue.loadManifest(data);
				queue.load();
				queue.on("complete",function(){
					console.log("所有资源加载完毕");
				});
			}
			console.log($("#web>div"));
			
			
		</script>
		
	</body>
</html>
